<template>
  <div
    class="outer-wrapper"
    style="height: auto; min-height: 1080px"
    :class="'skin-' + $root.skin"
  >
    <div
      class="success-modal"
      :class="{
        success: saveText == '保存成功',
        error: saveText == '保存失败',
      }"
    >
      {{ saveText }}
    </div>
    <div class="diy-wrapper" :class="mode">
      <div class="content-wrapper">
        <div class="page-list">
          <div class="search-wrapper">
            <input
              class="input"
              v-model="searchValue"
              placeholder="搜索"
              type="text"
            />
          </div>
          <div
            class="item"
            v-for="(item, index) in diyContent"
            :class="{ selected: index == diyContentIndex }"
            :key="index"
            @click="diyContentIndex = index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="content-wrapper"
        v-if="diyContent.length !== 0 && diyContent[diyContentIndex]"
      >
        <draggable
          v-model="diyContent[diyContentIndex].children"
          tag="div"
          class="image-list"
          v-bind="{
            group: { name: 'dzh', pull: 'clone', put: false },
            sort: false,
            animation: 0,
            filter: '.undraggable',
          }"
        >
          <div
            class="item"
            v-for="(item, index) in diyContent[diyContentIndex].children"
            :key="index"
          >
            <div class="title">{{ item.title }}</div>
            <img :src="ImageBaseUrl + item.image" class="image" />
          </div>
        </draggable>
      </div>
    </div>
    <PublicHeader
      mode="dzh"
      page="my"
      @dahSwitchClick="dahSwitchClick"
    ></PublicHeader>
    <draggable
      v-model="diyDetail"
      class="diy-detail diy-dzh"
      @add="addComponent"
      @remove="removeComponent"
      :disabled="mode == 'show'"
      v-bind="{ group: 'dzh', animation: 300 }"
    >
      <div
        class="diy-item"
        :class="{ level: item.name, auto: item.auto }"
        v-for="(item, index) in diyDetail"
        :key="index"
      >
        <div class="diy-content" :class="mode">
          <img
            v-if="item.name"
            src="~@/assets/diy/close.png"
            class="close-button"
            @click="closeComponent(index)"
          />
          <component class="border-echart" :is="item.name" />
        </div>
      </div>
    </draggable>
  </div>
</template>
<script>
const ImageBaseUrl =
  process.env.NODE_ENV == "development"
    ? "http://localhost:8888/"
    : "http://68.12.74.11/cxkj/images/dpzsDzh/";
import Vue from "vue";
import PublicHeader from "@/components/publicHeader.vue";

// 首页 --start--
import sstjlef from "../dpzsSwsy/modules/sstjlef.vue";
import sstjys from "../dpzsSwsy/modules/sstjys.vue";
import sstjyx from "../dpzsSwsy/modules/sstjyx.vue";
import sstjyz from "../dpzsSwsy/modules/sstjyz.vue";
import sstjzb from "../dpzsSwsy/modules/sstjzb.vue";
import sstjzs from "../dpzsSwsy/modules/sstjzs.vue";
import sstjzx from "../dpzsSwsy/modules/sstjzx.vue";
import sstjzz from "../dpzsSwsy/modules/sstjzz.vue";
// 首页 --end--
// 登记 --start--
import all from "../dpzsSwdj/modules/all.vue";
import swdjfdw from "../dpzsSwdj/modules/swdjfdw.vue";
import swdjfhy from "../dpzsSwdj/modules/swdjfhy.vue";
import swdjfzclx from "../dpzsSwdj/modules/swdjfzclx.vue";
// 登记 --end--

// 收入 --start--
import aqjsfsr from "../dpzsSwsr/modules/aqjsfsr.vue";
import aszsfsr from "../dpzsSwsr/modules/aszsfsr.vue";
import bnsfsrqs from "../dpzsSwsr/modules/bnsfsrqs.vue";
import bnsfsybr from "../dpzsSwsr/modules/bnsfsybr.vue";
import gxsfsr from "../dpzsSwsr/modules/gxsfsr.vue";
// 收入 --end-

// 申报 --start--
import xshcbsje from "../dpzsSwsb/modules/xshcbsje.vue";
import qnsbhcfb from "../dpzsSwsb/modules/qnsbhcfb.vue";
import qnsbjefb from "../dpzsSwsb/modules/qnsbjefb.vue";
import ysbqktj from "../dpzsSwsb/modules/ysbqktj.vue";
// 申报 --end-

// 稽查 --start--
import ablhjqk from "../dpzsSwjc/modules/ajblhjqk.vue";
import ajcbqk from "../dpzsSwjc/modules/ajcbqk.vue";
import qscbsefdw from "../dpzsSwjc/modules/qscbsefdw.vue";
import qscbseflx from "../dpzsSwjc/modules/qscbseflx.vue";
import skajstj from "../dpzsSwjc/modules/skajstj.vue";
import xsajzs from "../dpzsSwjc/modules/xsajzs.vue";
// 稽查 --end-

// 数据共治 --start--
import sdsjptsjhjqs from "../dpzsSjgz/modules/sdsjptsjhjqs.vue";
import ywxt from "../dpzsSjgz/modules/ywxt.vue";
import sdzxFy from "../dpzsSjgz/modules/sdzxFy.vue";
import sdzxFnsje from "../dpzsSjgz/modules/sdzxFnsje.vue";
import sdzxFhy from "../dpzsSjgz/modules/sdzxFhy.vue";
// 数据共治 --end-

Vue.filter("formateMoney", (num) => {
  return num.toString().replace(/\d+/, function (n) {
    return n.replace(/(\d)(?=(?:\d{4})+$)/g, "$1,");
  });
});

// 收入 --end--
export default {
  components: {
    PublicHeader,
    sstjlef,
    sstjys,
    sstjyx,
    sstjyz,
    sstjzb,
    sstjzs,
    sstjzx,
    sstjzz,
    all,
    swdjfdw,
    swdjfhy,
    swdjfzclx,
    aqjsfsr,
    aszsfsr,
    bnsfsrqs,
    bnsfsybr,
    gxsfsr,
    xshcbsje,
    qnsbhcfb,
    qnsbjefb,
    ysbqktj,
    ablhjqk,
    ajcbqk,
    qscbsefdw,
    qscbseflx,
    skajstj,
    xsajzs,
    sdsjptsjhjqs,
    ywxt,
    sdzxFy,
    sdzxFnsje,
    sdzxFhy,
  },
  data() {
    return {
      mode: "show", // 当前页面是什么状态  show:回显状态   edit 编辑状态
      skin: 1, // 预留换肤字段
      searchValue: "", // 搜索字段
      ImageBaseUrl: ImageBaseUrl,
      diyContentIndex: 0,
      diyContent: [],
      diyDetail: [],
      saveText: "",
    };
  },
  watch: {
    searchValue() {
      this.initSouSuoData();
    },
  },
  created() {
    let arr = [];
    for (let i = 0; i < 864; i++) {
      arr.push({});
    }
    this.diyDetail = arr;
    this.initSouSuoData();
    this.initDzhData();
  },
  methods: {
    initSouSuoData() {
      this.ajax({
        url: "/dpzsDzhcxService/dzhymssjgQuery",
        method: "post",
        data: {
          param: {
            ssnr: this.searchValue,
          },
        },
      }).then((res) => {
        res = res.data;
        this.diyContentIndex = 0;
        this.diyContent = res.data.ssjgList;
      });
    },
    initDzhData() {
      this.ajax({
        url: "/dpzsDzhcxService/dzhymcshQuery",
        method: "post",
        data: {
          param: {
            swrydm: this.$route.query.swrydm,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.data.ymnr) {
          this.mode = "show";
          let diyData = JSON.parse(res.data.ymnr);
          this.diyDetail = diyData.map((item) => {
            return { ...item };
          });
        } else {
          this.mode = "edit";
          this.showFormate(false);
        }
      });
    },
    dahSwitchClick() {
      if (this.mode == "show") {
        if (this.diyDetail.length !== 864) {
          let arr = [];
          for (let i = 0; i < 864 - this.diyDetail.length; i++) {
            arr.push({});
          }
          this.diyDetail = this.diyDetail.concat(arr);
        }
        this.mode = "edit";
        this.showFormate(false);
      } else {
        this.save();
      }
    },
    // 保存定制化数据
    save() {
      for (let i = this.diyDetail.length - 1; i >= 0; i--) {
        if (!this.diyDetail[i].name) {
          this.diyDetail.splice(i, 1);
        } else {
          break;
        }
      }
      this.showFormate(true);
      let params;
      if (this.diyDetail.length == 0) {
        params = "";
      } else {
        params = JSON.stringify(this.diyDetail);
      }
      this.ajax({
        url: "/dpzsDzhcxService/dzhymdjbcQuery",
        method: "post",
        data: {
          param: {
            swrydm: this.$route.query.swrydm,
            dzhymnr: params,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.data.flag == "1") {
          this.saveText = "保存成功";
        } else {
          this.saveText = "保存失败";
        }
        setTimeout(() => {
          this.saveText = "";
        }, 4000);
      });
      this.mode = "show";
    },
    showFormate(flag) {
      if (flag) {
        let auto = -1;
        for (let i = this.diyDetail.length - 1; i >= 0; i--) {
          if (this.diyDetail[i].name) {
            let row = parseInt(i / 24);
            if (auto == -1) {
              auto = row;
              this.diyDetail[i].auto = true;
            } else {
              if (auto == row) {
                this.diyDetail[i].auto = true;
              } else {
                break;
              }
            }
          }
        }
      } else {
        this.diyDetail = this.diyDetail.map((item) => {
          delete item.auto;
          return item;
        });
      }
    },
    // 删除关闭组件（删除数据）
    closeComponent(index) {
      this.diyDetail.splice(index, 1, {});
    },
    addComponent(params) {
      // console.log(params);
      for (let i = params.newIndex; i < this.diyDetail.length; i++) {
        if (this.diyDetail[i].name) {
          continue;
        } else {
          this.diyDetail.splice(i, 1);
          break;
        }
      }
    },
    removeComponent(params) {
      console.log(params);
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/styles/common.scss";
.page-list {
  position: relative;
  .search-wrapper {
    position: absolute;
    top: 14px;
    left: -100px;
    width: 220px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-size: 100% 100%;
    background-image: url("~@/assets/images/bg-search.png");

    .input {
      margin-right: 16px;
      width: 150px;
      border: none !important;
      outline: none !important;
      background-color: transparent;
      font-size: 16px;
      &:focus {
        border: none;
        box-shadow: 0;
      }
    }
    .input:active {
      border: none !important;
    }
  }
}
.success-modal {
  position: fixed;
  top: 120px;
  right: -240px;
  width: 200px;
  height: 60x;
  line-height: 60px;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  background-size: 100% 100%;
  background-image: url("~@/assets/images/bg-modal.png");
  transition: right ease-in-out 0.3s;
  &.success {
    right: -8px;
  }
  &.error {
    right: -8px;
    filter: grayscale(1);
  }
}
</style>
